<template>
    <div>
        <template v-if="tableData.length > 0">
            <el-table border size="small" @select="selectColumn" :data="tableData" style="width: 100%;" height="580px">
                <el-table-column type="selection" width="70">
                </el-table-column>

                <el-table-column v-for="(item, index) in column" :key="index" :label="item.label" :prop="item.prop"
                    :width="item.width">
                </el-table-column>

                <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="changeCoumn(scope.row)" type="text" size="small">
                            编辑
                        </el-button>
                        <el-button @click="handleDelete(scope.row.id)" style="color: red;" type="text" size="small">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <template v-else>
            <el-empty style="width: 100%;"></el-empty>
        </template>
        <!-- {{ column }} -->
    </div>
</template>

<script>
export default {
    name: 'TableComponent',
    components: {
    },
    props: {
        tableData: {
            type: Array,
            default: () => [],
        },
        column: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            // loading:true,
        }
    },
    mounted() {
    },
    methods: {
        changeCoumn(row) {
            console.log('changeCoumn-->', row);
            this.$emit('changeCoumn', row);
        },

        handleDelete(id) {
            console.log('deleteById-->', id);
            this.$emit('handleDelete', id);
        },

        handleSizeChange(val) {
            // console.log(val);
            this.$emit('handleSizeChange', val);
        },
        handleCurrentChange(val) {
            // console.log(val);
            this.$emit('handleCurrentChange', val);
        },

        selectColumn(rowObj) {
            console.log('selectColumn-->', rowObj);
            const rowArray = [...rowObj];
            const ids = [];
            rowArray.forEach(item => {
                ids.push(item.id)
            })
            console.log('ids-->', ids);
            this.$emit('columnIds', ids);
        }
    },

}
</script>

<style lang="scss" scoped></style>